<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>任务详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../../css/sm.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/normal.css" />
    <link rel="stylesheet" type="text/css" href="../../css/taskdetail.css" />
    <link rel="stylesheet" type="text/css" href="../../iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper-4.2.0.min.css" />
</head>
<style>
.swiper-container {
    display: none;
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    top: 0;
    z-index: 99;
}

.swiper-slide {
    overflow: hidden;
}
.swiper-slide img{
    width: 100%;
}
.closeIcon{
    display: none;
}
.closeIcon img{
    position: absolute;
    right: 1rem;
    top: 1rem;
    height: 1.25rem;
    width: 1.25rem;
    z-index: 999;
}
</style>
<body>
    <div class="page allWarp">
        <div class="content">
            <div class="taskNode">
                <span v-text="nodeName"></span>
                <span v-text="capitalizes(startTime)"></span>
            </div>
            <div class="taskInfo">
                <ul>
                    <li>
                        <span class="width20 col999">项目名称:</span>
                        <span class="width80 col36" v-text="projectName"></span>
                    </li>
                    <li>
                        <span class="width20 col999">客户名称:</span>
                        <span class="width80 col36" v-text="customerName"></span>
                    </li>
                    <li>
                        <span class="width20 col999">客户电话:</span>
                        <span class="width80 col36" v-text="customerPhone"></span>
                    </li>
                    <li>
                        <span class="width20 col999">客户地址:</span>
                        <span class="width80 col36" v-text="customerAddress"></span>
                    </li>
                </ul>
            </div>
            <div class="taskInfo top10">
                <ul>
                    <li>
                        <span class="width20 col999">销售名称:</span>
                        <span class="width80 col36" v-text="salerName"></span>
                    </li>
                    <li>
                        <span class="width20 col999">销售电话:</span>
                        <span class="width80 col36" v-text="phone"></span>
                    </li>
                </ul>
            </div>
            <div class="dynamic top10">
                <div class="dynamicTitle">
                    <span>任务动态</span>
                    <span style="display: flex;align-items: center;" class="colorange" v-if="isDone == 1 && showPublish" onclick="publish()">发布新动态<i class="iconfont icon-fabu left5"></i></span>
                </div>
                <div class="trackList">
                    <ul class="trackListUl">
                        <li v-for="item in logList">
                            <p class="font12 col999 lineheight20 dot around">
                                <div class="top10">
                                    <p class="col999 font12">
                                        <span v-text="capitalize(item.createTime)"></span>
                                        <span v-text="item.createUser"></span>
                                        <i class="iconfont icon-shanchu fright" onclick="deleteDt()" :data-id="item.id" v-if="isDone == 1"></i>
                                    </p>
                                    <p class="font12" v-text="item.description"></p>
                                    <p>
                                        <span v-for="(items, index) in item.fileList" @click="openPic(item.fileList,index)">
                                            <img :src="items.filePath" alt="" class="imgIcon">
                                        </span>
                                    </p>
                                </div>
                            </p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="saveTask" v-if="isDone == 1  && showPublish" onclick="next()">完成并转派至下一节点</div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item in orderPictureVoList">
                    <div class="swiper-zoom-container">
                        <img v-bind:src="item.filePath">
                    </div>
                </div>
            </div>
        </div>
        <div class="closeIcon" @click="closePic()">
            <img src="../../img/X@2x.png" alt="">
        </div>
    </div>
    <script type="text/javascript" src="../../js/zepto.js"></script>
    <script type="text/javascript" src="../../js/sm.min.js"></script>
    <script type="text/javascript" src="../../js/vue.min.js"></script>
    <script type="text/javascript" src="../../js/ajax.js"></script>
    <script type="text/javascript" src="../../js/back.js"></script>
    <script type="text/javascript" src="../../js/swiper-4.2.0.min.js"></script>
    <script type="text/javascript">
        var projectCode = GetQueryString("projectCode");
        var nodeCode = GetQueryString("nodeCode");
        var hasnode = GetQueryString("hasnode");
        var keyN = JSON.parse(getCookie("user_data_three"));
        var createUser;
        if (keyN != null) {
            createUser = keyN.userId;
        }
        var demo = new Vue({
            el: '.allWarp',
            data: {
                projectName: '',        //项目名称
                customerName:'',        //客户名称
                customerPhone:'',       //客户电话
                customerAddress:'',     //客户地址
                salerName:'',           //销售名称
                phone:'',               //销售电话
                logList:[],
                nodeName:'',            //节点名称
                startTime:'',           //节点开始时间
                status:'',              //项目状态 1:待派工 2：派工中 3：已完成
                nodeCodes:'',
                isDone:'',
                orderPictureVoList:[],
                showPublish:true,           //显示发布动态按钮
            },
            methods:{
                openPic:function(val,index){ 
                    demo.orderPictureVoList = val;
                    $(".swiper-container").show();
                    $(".closeIcon").show();
                    var swiper = new Swiper('.swiper-container', {
                        zoom: true,
                        observer:true,//修改swiper自己或子元素时，自动初始化swiper
                        observeParents:true,//修改swiper的父元素时，自动初始化swiper
                        initialSlide : index,
                    });
                },
                closePic:function(){
                    $(".swiper-container").hide();
                    $(".closeIcon").hide();
                }
            },
            beforeCreate: function() {
                init();
            }
        })
        demo.isDone = hasnode;
        // 任务详情
        function init(){
            var params = {};
            params.projectCode = projectCode;
            params.nodeCode = nodeCode;
            kfAjaxGet.orderDetail(params, function(json) {
                if (json.code == 200) {
                    var data = json.data;
                    var project = data.project;
                    demo.logList = data.logList;
                    demo.projectName = project.projectName;
                    demo.customerName = project.customerName;
                    demo.customerPhone = project.customerPhone;
                    demo.customerAddress = project.customerAddress;
                    demo.salerName = project.salerName;
                    demo.status = project.status;
                    demo.phone = project.phone;
                    demo.nodeName = json.data.projectNode.nodeName;
                    demo.startTime = json.data.projectNode.startTime;
                    var dutyUserId = json.data.projectNode.dutyUserId;
                    if (dutyUserId == createUser) {
                        demo.showPublish = true;
                    }else{
                        demo.showPublish = false;
                    }
                    console.log(json)
                } else if (checkcode(json.code)) {

                } else {
                    $.toast(json.message);
                }
            })
        }
        // 跳转发布新动态
        function publish(){
            window.location = 'releaseDynamic.html?nodeCode='+nodeCode;
        }

        // 删除动态
        function deleteDt(){
            var _that = $(event.currentTarget);
            var id = _that.attr("data-id");
            $.confirm('确认删除该动态吗?', '删除动态', function () {
                var params = {};
                params.id = id;
                kfAjaxGet.deleteDt(params, function(json) {
                    if (json.code == 200) {
                        history.go(0);
                    } else if (checkcode(json.code)) {

                    } else {
                        $.toast(json.message);
                    }
                })
            });
        }

        // 派发下一节点
        function next(){
            var params = {};
            params.projectCode = projectCode;
            params.nodeCode = nodeCode;
            params.updateUid = createUser;
            kfAjaxGet.nextJd(params, function(json) {
                if (json.code == 200) {
                    window.location ='taskList.html';
                } else if (checkcode(json.code)) {

                } else {
                    $.toast(json.message);
                }
            })
        }

        $(function(){
            $('#gohome').on('click',function(){
                window.location = 'taskList.html';
            })
        })

    </script>
</body>
</html>